<template>
    <div>
        <div class="controls">
            <el-button
                type="primary"
                :disabled="clkStore.isAnimating"
                @click="clk.step()"
                >下一步</el-button
            >
            <el-button
                type="primary"
                v-if="!clkStore.isRunning"
                :disabled="clkStore.isAnimating"
                @click="clk.run()"
                >运行</el-button
            >
            <el-button
                type="primary"
                v-else
                @click="clk.stop()"
                >暂停</el-button
            >
        </div>
        <div class="status-msg mt-4"></div>
    </div>
</template>

<script setup lang="ts">
import { clk } from './core/clk'
import { clkStore } from './core/config/runtimeConfig'
</script>

<style scoped></style>
